import { Text, View } from '@tarojs/components';
import Taro, { pxTransform, useRouter } from '@tarojs/taro';
import React, {
  PropsWithChildren,
  useCallback,
  useEffect,
  useState,
} from 'react';
import clsx from 'clsx';
import { ProductRespType, TableItemType } from '@/types/product';
import Skeleton from '@/components/Skeleton';
import { getJsonFile } from '@/utils/sts';

import './index.module.scss';

const ProductPage: React.FC<PropsWithChildren> = () => {
  const router = useRouter<{ id: string }>();
  const [loading, setLoading] = useState(true);
  const [productData, setProductData] = useState<ProductRespType | null>(null);

  const keys = ['col1', 'col2', 'col3', 'col4', 'col5', 'col6', 'col7', 'col8'];

  const onJumpDetail = useCallback((data: TableItemType) => {
    Taro.navigateTo({ url: `/pages/modelDetail/index?model=${data.model}` });
  }, []);

  const getProductData = useCallback(async () => {
    const { id } = router.params;

    if (id) {
      setLoading(true);
      const data = await getJsonFile<ProductRespType>('product/11.json');

      if (!data) {
        Taro.showToast({ title: '数据获取失败', icon: 'none' });
        return;
      }
      setProductData(data);
      setTimeout(() => {
        setLoading(false);
      }, 1500);
    }
  }, [router.params]);

  useEffect(() => {
    getProductData();
  }, []);

  return (
    <React.Fragment>
      {loading ? (
        <Skeleton />
      ) : (
        <View className='table-container'>
          {/* 表头 */}
          <View className='table-header'>
            <View className='header-type-cell'>
              <Text className='text-top-right'>指标</Text>
              <View className='text-bottom-left'>型号</View>
            </View>
            <View className='header-cell'>
              <Text>工作频率</Text>
              <Text>(GHz)</Text>
            </View>
            <View className='header-cell'>
              <Text>增益</Text>
              <Text>(dB)</Text>
            </View>
            <View className='header-cell'>
              <Text>噪声系数</Text>
              <Text>(dB)</Text>
            </View>
            <View className='header-cell'>
              <Text>输出P-1dB</Text>
              <Text>(dBm)</Text>
            </View>
            <View className='header-cell'>
              <Text>输出OIP3</Text>
              <Text>(dBm)</Text>
            </View>
            <View className='header-cell'>
              <Text>工作电流</Text>
              <Text>(V/mA)</Text>
            </View>
            <View className='header-cell'>
              <Text>输入回波</Text>
              <Text>损耗(dB)</Text>
            </View>
            <View className='header-cell header-cell-last'>
              输出回波{'\n'}损耗(dB)
            </View>
          </View>

          {/* 表格内容 */}
          {productData?.tableData.map((item, index) => (
            <View
              key={index}
              className={clsx('table-row', {
                'table-row-last': index === productData?.tableData.length - 1,
              })}
              style={{ minHeight: pxTransform((item.row || 1) * 46) }}
            >
              <View className='cell' onClick={() => onJumpDetail(item)}>
                {item.model}
              </View>
              {keys.map((k, idx) =>
                Array.isArray(item[k]) ? (
                  <View
                    key={k}
                    className={clsx('merge-cell-box', {
                      'merge-cell-box-last': idx === keys.length - 1,
                    })}
                  >
                    {item[k].map((v, i) => (
                      <View
                        key={i}
                        className={clsx('merge-cell', {
                          'merge-cell-last': i === item[k].length - 1,
                        })}
                      >
                        {v}
                      </View>
                    ))}
                  </View>
                ) : (
                  <View
                    key={k}
                    className={clsx('cell', {
                      'cell-last': idx === keys.length - 1,
                    })}
                  >
                    {item[k]}
                  </View>
                )
              )}
            </View>
          ))}
        </View>
      )}
    </React.Fragment>
  );
};

export default ProductPage;
